<template>
  <div class="m-content-box">
    <div class="diagnose-rent">
      <div v-if="updshow" id="edit" class="diagnose-rent__bd hide clear">
        <span class="diagnose-rent__label"><em class="icon icon-required" />请输入房租（元/月）</span>
        <div class="diagnose-rent__fill">
          <input id="rent" type="text" name="rent" class="inp-140-34" data-v="required" data-rule="float" data-limit="0.01,0" data-msg="请输入房租(数字，最小为0.01)" placeholder="请输入房租">
          <span class="diagnose-rent__btn" @click="updshow=false"><img loading="lazy" src="https://img.keepyoga.com/assets/img_cloud/diagnose/sure.png" alt="">完成</span>
        </div>
      </div>
      <div v-if="!updshow" id="normal" class="diagnose-rent__bd clear">
        <span class="diagnose-rent__label"><em class="icon icon-required" />房租（元/月）</span>
        <div class="diagnose-rent__fill">
          <span class="js-rent-text">100</span>
          <span class="diagnose-rent__btn" @click="updshow=true">
            <img loading="lazy" src="../../../public/img/bianji.png" style="width: 19px; height: 19px;" alt="">
            编辑</span>
        </div>
      </div>
      <div class="diagnose-rent__tips">温馨提示：1.优先输入场馆房租；2.每个月只有一次改动房租金额的机会；3.保证数据真实，否则会直接影响结果呈现</div>
    </div>
    <div id="container" class="diagnose-desc"><div class="diagnose-desc__hd">
                                                <div class="diagnose-desc__evaluate venue-type-0">
                                                  <img loading="lazy" src="https://img.keepyoga.com/assets/img_cloud/diagnose/type-0-0.png" alt="">
                                                </div>
                                              </div>
      <div class="diagnose-desc__bd">
        <div class="diagnose-desc__row">
          <div class="evaluate-item">
            <div class="evaluate-item__title"><span class="evaluate-badge" />门店整体运营情况</div>
            <div class="evaluate-item__bd">
              <div class="evaluate-item__text">
                <p class="evaluate-item__text-title">诊断报告</p>
                <p class="evaluate-item__text-content">门店整体运营情况较差，多项指标未达标，有<span class="number-light">11</span>条问题需要注意 </p>
              </div>
              <div class="evaluate-item__chart">
                <div class="circle-box">
                  <div class="cycle-text">本周期</div>
                  <div class="cycle-text cycle-text_2">上周期</div>
                  <div class="circle-line">
                    <div class="circle-line__item circle-line__item_1" />
                    <div class="circle-line__item" />
                    <div class="circle-line__item" />
                  </div>
                  <div class="circle-bg circle-bg_1">
                    <div class="circle status-level_1" data-score="34" style="transform: rotate(61.2deg);" />
                    <div class="circle-past_bg" />
                    <div class="circle-past" data-score="44" style="transform: rotate(79.2deg);" />
                    <div class="circle-mask" />
                  </div>
                  <div class="status status_1">34<span class="score-unit">分</span></div>
                </div>
              </div>
            </div>
          </div>
          <div class="evaluate-item">
            <div class="evaluate-item__title"><span class="evaluate-badge evaluate-badge_2" />盈利分析</div>
            <div class="evaluate-item__bd">
              <div class="evaluate-item__text">
                <p class="evaluate-item__text-title">诊断报告</p>
                <p class="evaluate-item__text-content">门店盈利情况一般，多项参数达标，有<span class="number-light">3</span>条问题需要注意 </p>
              </div>
              <div class="evaluate-item__chart">
                <div class="circle-box">
                  <div class="cycle-text">本周期</div>
                  <div class="cycle-text cycle-text_2">上周期</div>
                  <div class="circle-line">
                    <div class="circle-line__item circle-line__item_2" />
                    <div class="circle-line__item" />
                    <div class="circle-line__item" />
                  </div>
                  <div class="circle-bg circle-bg_2">
                    <div class="circle status-level_2" data-score="42" style="transform: rotate(75.6deg);" />
                    <div class="circle-past_bg" />
                    <div class="circle-past" data-score="30" style="transform: rotate(54deg);" />
                    <div class="circle-mask" />
                  </div>
                  <div class="status status_2">42<span class="score-unit">分</span></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="diagnose-desc__row">
          <div class="evaluate-item">
            <div class="evaluate-item__title"><span class="evaluate-badge evaluate-badge_3" />会员活跃度</div>
            <div class="evaluate-item__bd">
              <div class="evaluate-item__text">
                <p class="evaluate-item__text-title">诊断报告</p>
                <p class="evaluate-item__text-content">门店客量情况较差，多项板块参数不达标，有<span class="number-light">8</span>条问题需要注意 </p>
              </div>
              <div class="evaluate-item__chart">
                <div class="circle-box">
                  <div class="cycle-text">本周期</div>
                  <div class="cycle-text cycle-text_2">上周期</div>
                  <div class="circle-line">
                    <div class="circle-line__item circle-line__item_1" />
                    <div class="circle-line__item" />
                    <div class="circle-line__item" />
                  </div>
                  <div class="circle-bg circle-bg_1">
                    <div class="circle status-level_1" data-score="26" style="transform: rotate(46.8deg);" />
                    <div class="circle-past_bg" />
                    <div class="circle-past" data-score="14" style="transform: rotate(25.2deg);" />
                    <div class="circle-mask" />
                  </div>
                  <div class="status status_1">26<span class="score-unit">分</span></div>
                </div>
              </div>
            </div>
          </div>
          <div class="evaluate-item">
            <div class="evaluate-item__title"><span class="evaluate-badge evaluate-badge_4" />门店竞争力</div>
            <div class="evaluate-item__bd">
              <div class="evaluate-item__text">
                <p class="evaluate-item__text-title">诊断报告</p>
                <p class="evaluate-item__text-content">门店竞争力较弱，需要增强，有<span class="number-light">11</span>条问题需要注意 </p>
              </div>
              <div class="evaluate-item__chart">
                <div class="circle-box">
                  <div class="cycle-text">本周期</div>
                  <div class="cycle-text cycle-text_2">上周期</div>
                  <div class="circle-line">
                    <div class="circle-line__item circle-line__item_1" />
                    <div class="circle-line__item" />
                    <div class="circle-line__item" />
                  </div>
                  <div class="circle-bg circle-bg_1">
                    <div class="circle status-level_1" data-score="34" style="transform: rotate(61.2deg);" />
                    <div class="circle-past_bg" />
                    <div class="circle-past" data-score="44" style="transform: rotate(79.2deg);" />
                    <div class="circle-mask" />
                  </div>
                  <div class="status status_1">34<span class="score-unit">分</span></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="diagnose-desc__ft">
        <el-button type="success">查看完整报告</el-button>
      </div></div>
  </div>
</template>

<script setup>
import { getXuan } from '@/utils/limits.js'
import { mapGetters } from 'vuex' // Secondary package based on el-pagination

export default {
  name: 'ArticleList',
  components: {
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'info',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      updshow: false
    }
  },
  computed: {
    ...mapGetters([
      'permission_routes',
      'roles'
    ])
  },
  created() {
    var xuanList = [{
      name: '周营业报表',
      url: '/diagnosis/diagnoseWeekly',
      pd: true
    }, {
      name: '月营业报表',
      url: '/diagnosis/diagnoseMonthly',
      pd: true
    }]
    var xuanList1 = getXuan(xuanList, this.roles)
    this.$store.dispatch('user/changeXuan', {
      key: 'xuanList',
      value: xuanList1
    })
    this.$store.dispatch('user/changeXuan', {
      key: 'xuan',
      value: 0
    })
  },
  methods: {
  }
}
</script>

<style scoped>
.m-content-box {
  position: relative;
  padding: 30px 63px;
  background: #f3f7ff;
}
.diagnose-rent {
  min-height: 83px;
  margin-bottom: 20px;
}
.diagnose-rent__bd {
  margin-bottom: 1px;
  height: 50px;
  line-height: 50px;
  padding: 0 15px;
  background: #ffffff;
}
.diagnose-rent__bd {
  margin-bottom: 1px;
  height: 50px;
  line-height: 50px;
  padding: 0 15px;
  background: #ffffff;
}
.diagnose-rent__tips {
  padding: 7px 15px;
  font-size: 12px;
  color: #ff7010;
  line-height: 1.5;
  background: #ffffff;
}
.diagnose-rent__label {
  float: left;
}
.diagnose-rent__fill {
  float: right;
}
.inp-140-34 {
  width: 122px;
  height: 16px;
  border: 1px solid #d9d9d9;
  display: inline-block;
  padding: 8px;
  border-radius: 4px;
}
input {
  caret-color: #41c3a8;
}
.diagnose-desc__hd {
  position: relative;
  height: 34px;
  margin-bottom: 20px;
}
.diagnose-desc__ft {
  margin-top: 65px;
  text-align: center;
}
.venue-type-0 {
  background: url(https://img.keepyoga.com/assets/img_cloud/diagnose/diagnose-bg-0.png) left bottom repeat-x;
}
.diagnose-desc__evaluate>img {
  display: block;
}
.diagnose-desc__row {
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 15px;
}
.evaluate-item:first-child {
  margin-right: 40px;
}
.evaluate-item {
  -ms-flex: 1;
  flex: 1;
  min-height: 230px;
  padding: 10px 25px 30px 10px;
  box-sizing: border-box;
  background: #ffffff;
  box-shadow: 0 1px 8px 2px rgba(235, 235, 235, .5);
  border-radius: 8px;
}
.evaluate-item__title {
  position: relative;
  padding-left: 15px;
  height: 25px;
  margin-bottom: 30px;
  font-size: 18px;
  line-height: 1.5;
}
.evaluate-item__bd {
  display: -ms-flexbox;
  display: flex;
  padding-left: 15px;
}
.evaluate-badge {
  position: absolute;
  left: 0;
  top: 4px;
  width: 4px;
  height: 20px;
  background: #48a9f3;
  border-radius: 8px;
}
.evaluate-item__text {
  -ms-flex: 1;
  flex: 1;
  padding-right: 35px;
  color: #333;
  line-height: 1.5;
}
.evaluate-item__chart {
  width: 258px;
  height: 136px;
  padding-top: 10px;
  box-sizing: border-box;
}
.number-light {
  margin: 0 3px;
  color: #ff1f1f;
  font-size: 16px;
}
.circle-box {
  position: relative;
  width: 258px;
  height: 129px;
  overflow: hidden;
}
.cycle-text {
  position: absolute;
  width: 100%;
  z-index: 40;
  top: 12px;
  text-align: center;
  font-size: 13px;
  color: #787878;
}
.cycle-text_2 {
  top: 49px;
}
.circle-line {
  position: absolute;
  width: 100%;
  bottom: 0;
  height: 1px;
}
.circle-bg_1 {
  border: 1px solid #ff5959;
}

.circle-bg {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 258px;
  border-radius: 50%;
  background: #ffffff;
  box-sizing: border-box;
}
.status_1 {
  color: #ff1f1f;
}

.status {
  position: absolute;
  bottom: 0;
  width: 100%;
  z-index: 40;
  font-size: 30px;
  text-align: center;
}
.circle-line__item:nth-child(1) {
  position: absolute;
  width: 100%;
  height: 1px;
  z-index: 10;
}

.circle-line__item_1 {
  background: #ff5959;
}
.status-level_1 {
  background-color: #ff5959;
}

.circle {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: 256px;
  height: 256px;
  border-radius: 50%;
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
  transition: transform 1.5s;
  box-sizing: border-box;
  clip: rect(128px, auto, auto, auto);
}
.circle-past_bg {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  width: 179px;
  height: 179px;
  border-radius: 50%;
  box-sizing: border-box;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  border: 1px solid #48a9f3;
  background: #ffffff;
}
.circle-past {
  position: absolute;
  left: 39px;
  top: 39px;
  z-index: 12;
  width: 177px;
  height: 177px;
  border-radius: 50%;
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
  transition: transform 1.5s;
  box-sizing: border-box;
  background: #48a9f3;
  clip: rect(88px, auto, auto, auto);
}
.circle-mask {
  position: absolute;
  width: 109px;
  height: 109px;
  left: 50%;
  top: 50%;
  z-index: 30;
  border-radius: 50%;
  box-sizing: border-box;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  border: 1px solid #48a9f3;
  background-color: #ffffff;
}
.circle-bg_2 {
  border: 1px solid #ffa061;
}
.status-level_2 {
  background-color: #ffa061;
}
.diagnose-rent__btn {
  margin-left: 10px;
  color: #41c3a8;
  cursor: pointer;
}
.diagnose-rent__bd {
  margin-bottom: 1px;
  height: 50px;
  line-height: 50px;
  padding: 0 15px;
  background: #ffffff;
}
</style>
